<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

    <title>购物车</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/carts.css">
</head>
<body>
    <header>
        <section id="nav-section">
            <div class="container">
                <div id="logoPic" class="shadow-sm">
                    <img src="./images/logo.png" width="190px;" alt="" />
                </div>
                <ul class="nav float-right py-1">
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="user_login.html">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="#">|</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="register.html">注册</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="#">|</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="#">会员中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="#">|</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="#">购物指南</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="#">|</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-secondary" href="#">关于我们</a>
                    </li>
                </ul>
            </div>
        </section>
        <section id="search-section">
            <div class="container py-4">
                <div class="row">
                    <div class="col-md-4 offset-md-2 mt-2">
                        <div class="nav" id="breadcrumb">
                            <a class="nav-link active" href="index.html">Home&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/</a>
                            <a class="nav-link disable"><i class="fa fa-shopping-cart mr-1"></i>我的购物车</a>
                        </div>
                    </div>
                    <div class="input-group col-md-6">
                        <input type="text" class="form-control" placeholder="霸王防脱">
                        <div class="input-group-append">
                            <button class="btn btn-outline-danger" type="button"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </div>
            </div> 
        </section>
    </header>
    <section class="cartMain">
        <div class="cartMain_hd">
            <ul class="order_lists cartTop">
                <li class="list_chk">
                    <!--所有商品全选-->
                    <input type="checkbox" id="all" class="whole_check">
                    <label for="all"></label>
                    全选
                </li>
                <li class="list_con">商品信息</li>
                <li class="list_info">商品参数</li>
                <li class="list_price">单价</li>
                <li class="list_amount">数量</li>
                <li class="list_sum">金额</li>
                <li class="list_op">操作</li>
            </ul>
        </div>

        <div class="cartBox">
            <div class="order_content">
                <!--  ul class="order_lists">
                    <li class="list_chk">
                        <input type="checkbox" id="checkbox_2" class="son_check">
                        <label for="checkbox_2"></label>
                    </li>
                    <li class="list_con">
                        <div class="list_img"><a href="#"><img src="./images/index-img/1.jpg" alt=""></a></div>
                        <div class="list_text"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, eligendi.</a></div>
                    </li>
                    <li class="list_info">
                        <p>规格：默认</p>
                        <p>尺寸：16*16*3(cm)</p>
                    </li>
                    <li class="list_price">
                        <p class="price">￥18</p>
                    </li>
                    <li class="list_amount">
                        <div class="amount_box">
                            <a href="#" class="reduce reSty">-</a>
                            <input type="text" value="1" class="sum">
                            <a href="#" class="plus">+</a>
                        </div>
                    </li>
                    <li class="list_sum">
                        <p class="sum_price">￥18</p>
                    </li>
                    <li class="list_op">
                        <p class="del"><a href="#" class="delBtn">移除商品</a></p>
                    </li>
                </ul>
                <ul class="order_lists">
                    <li class="list_chk">
                        <input type="checkbox" id="checkbox_3" class="son_check">
                        <label for="checkbox_3"></label>
                    </li>
                    <li class="list_con">
                        <div class="list_img"><a href="#"><img src="./images/index-img/2.jpg" alt=""></a></div>
                        <div class="list_text"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, officia!</a></div>
                    </li>
                    <li class="list_info">
                        <p>规格：默认</p>
                        <p>尺寸：16*16*3(cm)</p>
                    </li>
                    <li class="list_price">
                        <p class="price">￥88</p>
                    </li>
                    <li class="list_amount">
                        <div class="amount_box">
                            <a href="#" class="reduce reSty">-</a>
                            <input type="text" value="1" class="sum">
                            <a href="#" class="plus">+</a>
                        </div>
                    </li>
                    <li class="list_sum">
                        <p class="sum_price">￥88</p>
                    </li>
                    <li class="list_op">
                        <p class="del"><a href="#" class="delBtn">移除商品</a></p>
                    </li>
                </ul>
                <ul class="order_lists">
                    <li class="list_chk">
                        <input type="checkbox" id="checkbox_6" class="son_check">
                        <label for="checkbox_6"></label>
                    </li>
                    <li class="list_con">
                        <div class="list_img"><a href="#"><img src="./images/index-img/3.jpg" alt=""></a></div>
                        <div class="list_text"><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, voluptatibus!</a></div>
                    </li>
                    <li class="list_info">
                        <p>规格：默认</p>
                        <p>尺寸：16*16*3(cm)</p>
                    </li>
                    <li class="list_price">
                        <p class="price">￥180</p>
                    </li>
                    <li class="list_amount">
                        <div class="amount_box">
                            <a href="#" class="reduce reSty">-</a>
                            <input type="text" value="1" class="sum">
                            <a href="#" class="plus">+</a>
                        </div>
                    </li>
                    <li class="list_sum">
                        <p class="sum_price">￥180</p>
                    </li>
                    <li class="list_op">
                        <p class="del"><a href="#" class="delBtn">移除商品</a></p>
                    </li>
                </ul>-->
            </div>
        </div>

        <!--底部-->
        <div class="bar-wrapper">
            <div class="bar-right">
                <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
                <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
                <div class="calBtn"><a href="#">结算</a></div>
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script type="text/javascript">
		$(document).ready(function() {
			var userId = $.cookie('userId');

			$.delShoppingCartById = function(Id) {
				alert(Id);
				$.ajax({
                    type: "post",
                    async: false,
                    url: "/eshop-project/shopping/delShoppingCart?ID=" + Id,
                    success: function (data) {
                    	console.log(data);
    					alert("删除地址信息成功！");
    					window.location.reload();
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                });
			};
			$.ajax({
                type: "post",
                async: false,
                url: "/eshop-project/shopping/loadAll?UserID=" + userId,
                success: function (data) {
                	console.log(data);
                	var count = Object.keys(data).length;
                	var html = "";
					for (var i = 0; i < count; i++) {
						html += '<ul class="order_lists">' + 
                    			'<li class="list_chk">' +
                    			'<input type="hidden" id="checkbox_' + (i+2) + '" class="son_check">' +
                        		'<label for="checkbox_' + (i+2) + '"></label>' +
                    			'</li>' +
                    			'<li class="list_con">' +
                        		'<div class="list_img"><a href="#"><img src="./images/index-img/' + (i+1) + '.jpg" alt=""></a></div>' +
                        		'<div class="list_text"><a href="#">' + data[i].remarks + '</a></div>' +
                    			'</li>' +
                    			'<li class="list_info">' +
                        		'<p>规格：默认</p>' +
                        		'<p>尺寸：暂无</p>' +
                    			'</li>' +
			                    '<li class="list_price">' +
			                        '<p class="price">￥' + data[i].price + '</p>' +
			                    '</li>' +
			                    '<li class="list_amount">' +
			                        '<div class="amount_box">' +
			                            '<a href="#" class="reduce reSty">-</a>' +
			                            '<input type="text" value="' + data[i].count + '" class="sum">' +
			                            '<a href="#" class="plus">+</a>' +
			                        '</div>' +
			                    '</li>' +
			                    '<li class="list_sum">' +
			                       '<p class="sum_price">￥' + (data[i].price*data[i].count) + '</p>' +
			                    '</li>' +
			                    '<li class="list_op">' +
			                        '<p class="del"><a href="#" class="delBtn" onclick="$.delShoppingCartById(' + data[i].id + ')">移除商品</a></p>' +
			                    '</li>' +
			                	'</ul>';
					}
					$(".order_content").html(html);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                },
            });
		});  
    </script>
    <script src="./js/carts.js"></script>
</body>
</html>